<style>
.prize {
  padding: 0 30px;
}

.formInline .ivu-input-group-prepend .ivu-select-selection,
.formInline .ivu-input-group-append .ivu-select-selection {
  background-color: #fff !important;
}
</style>
<style scoped>
/* .formInline {
        background-color: #CECECE !important;
    } */

/* .formInline .common-box-body .ivu-form-item label {
        border: none !important;
    } */
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="prize ">
            <div>
                <h3 class="search-h3 huang">中级平台奖设置</h3>
            </div>

            <div style="color:red;margin-bottom:15px;">计算公式:
                <span style="color:blue;">团队FYC * 对应的奖金率 </span>
            </div>

            <div class="common-box-body">
                <Form :model="prize" ref="prize" :rules="ruleValiPrize">
                    <Row>
                        <Col :md="24" :lg="6">
                        <FormItem label="名称设置 :" prop="name">
                            <Input v-model="prize.name" size="large" type="text" placeholder="名称设置" />
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem label="适用对象 :" class="search" prop="rankIds">
                            <Select v-model="prize.rankIds" multiple filterable placeholder="选择适用对象" :transfer=true>
                                <Option v-for="(option, index) in comoptions" :value="option.id" :key="index">{{option.name}}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem label="发放周期 :" prop="configValue.assessmentCycleType">
                            <Select v-model="prize.configValue.assessmentCycleType">
                                <Option value="4">月</Option>
                                <Option value="3">季</Option>
                                <Option value="2">半年</Option>
                                <Option value="1">年</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem prop="enabled">
                            <RadioGroup v-model="prize.enabled">
                                是否启用 :
                                <Radio label="1" class="ml15">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                        </FormItem>
                        </Col>
                        <Col style="text-align:right" :md="24" :lg="6">
                        <FormItem>
                            <Button type="success" icon="plus" size="large" @click="zhijiadd">新增</Button>
                        </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <Row>
                <div class="table-theme highlight_table">
                    <Table :columns="column" :data="tableList" size="large" stripe highlight-row border></Table>
                </div>
            </Row>
            <div id="footer" style="padding:0 30px;">
                <Button type="primary" shape="circle" id="submit" :disabled="tableaction" @click="create" style="border-radius: 30px !important;margin-top:25px;">
                    <Icon type="checkmark-circled"></Icon>
                    保存 / 提交
                </Button>
                <Button id="back" @click="$router.back(-1)" shape="circle" style="border-radius: 30px !important;background:#77B4F5;color:white;font-size:14px;margin-top:25px;">返回</Button>
            </div>
        </div>
        <Modal v-model="zhijimodel" title="职级奖设置" :mask-closable="false" :closable="false" class-name="common-box-body formInline">
            <Form ref="formInline" :model="formInline" class="" :rules="ruleValiFormInline">
                <Row>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">月度FYC档次 :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="fycOverLimitValue">
                        <Input v-model="formInline.fycOverLimitValue">
                        <Select slot="prepend" style="width: 120px" v-model="fycOver">
                            <Option value="<">最大值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    <FormItem prop="fycLowLimitValue">
                        <Input v-model="formInline.fycLowLimitValue">
                        <Select slot="prepend" style="width: 120px" v-model="fycLow">
                            <Option value="≤">最小值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">对应奖金率 :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="rankRate">
                        <Input v-model="formInline.rankRate" placeholder="对应奖金率"></Input>
                    </FormItem>
                    </Col>
                    </Col>
                </Row>

                <!-- <Row>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">对应R13 :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="renewalRateOverLimitValue">
                        <Input v-model="formInline.renewalRateOverLimitValue">
                        <Select slot="prepend" style="width: 120px" v-model="fycOver">
                            <Option value="<" selected>最大值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    <FormItem prop="renewalRateLowLimitValue">
                        <Input v-model="formInline.renewalRateLowLimitValue">
                        <Select slot="prepend" style="width: 120px" v-model="fycLow">
                            <Option value="≤" selected>最小值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">R13奖金率 :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="rankRateForR">
                        <Input v-model="formInline.rankRateForR" placeholder="R13奖金率"></Input>
                    </FormItem>
                    </Col>
                    </Col>
                </Row> -->
            </Form>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="cance">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long  @click="add">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import {
  get_all_rule,
  get_add_rule,
  get_rule_list,
  del_rule,
  get_rank
} from "../../api/rule";
import util from '../../libs/util.js';
export default {
  data() {
    return {
      tableaction: false,
      closeable: false, //shif按ese按钮退出
      comoptions: [],
      prize: {
        tempalteId: this.$route.params.tempalteId,
        name: "",
        rankIds: [],
        enabled: "1",
        assessmentCycleType:'',
        configValue: {
          list: [],
          assessmentCycleType: "",
          ruleName:'中级平台奖',
        }
      },
      disabled: true,
      zhijimodel: false,
      column: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: "80"
        },
        {
          title: "团队月度FYC档次",
          key: "fycLowLimitValue",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.fycLowLimitValue +
                "≤月度FYC<" +
                params.row.fycOverLimitValue
            );
          }
        },
        {
          title: "奖金率",
          key: "rankRate",
          align: "center"
        },
        // {
        //   title: "继续率",
        //   key: "renewalRateLowLimitValue",
        //   align: "center",
        //   render: (h, params) => {
        //     return h(
        //       "div",
        //       params.row.renewalRateLowLimitValue +
        //         "≤月度FYC<" +
        //         params.row.renewalRateOverLimitValue
        //     );
        //   }
        // },
        // {
        //   title: "R13对应",
        //   key: "rankRateForR",
        //   align: "center"
        // },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: "80",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "large"
                  },
                  style: {
                    padding: "3px",
                    width: "60px"
                    // 'background':"#2E7EE1",
                    // 'color':"#fff"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableList: [],
      fycOver: "<",
      fycLow: "≤",
      formInline: {
        fycOverLimitValue: "",
        fycLowLimitValue: "",
        rankRate: "",
        renewalRateOverLimitValue: "",
        renewalRateLowLimitValue: "",
        rankRateForR: ""
      },
      ruleValiPrize: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "change"
          }
        ],
        rankIds: [{
            required: true,
            message: '请选择一个适用对象',
        }],
        "configValue.assessmentCycleType": [
          {
            required: true,
            message: "请选择发放周期",
            trigger: "blur,change"
          }
        ],
        enabled: [
          {
            required: true,
            message: "请选择是否启用",
            trigger: "blur,change"
          }
        ]
      },
      ruleValiFormInline: {
        fycOverLimitValue: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur,change"
          },
          {
            required: true,
            pattern: /^[z0-9*]*$/,
            message: "只能输入数字",
            trigger: "blur,change"
          }
        ],
        fycLowLimitValue: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur,change"
          },
          {
            required: true,
            pattern: /^[z0-9*]*$/,
            message: "只能输入数字",
            trigger: "blur,change"
          }
        ],
        rankRate: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur,change"
          },
          {
            required: true,
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: "只能输入数字",
            trigger: "blur,change"
          }
        ],
        renewalRateOverLimitValue: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur,change"
          },
          {
            required: true,
            pattern: /^[z0-9*]*$/,
            message: "只能输入数字",
            trigger: "blur,change"
          }
        ],
        renewalRateLowLimitValue: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur,change"
          },
          {
            required: true,
            pattern: /^[z0-9*]*$/,
            message: "只能输入数字",
            trigger: "blur,change"
          }
        ],
        rankRateForR: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          },
          {
            required: true,
            pattern: /^\d+(\.{0,1}\d+){0,1}$/,
            message: "只能输入数字",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    productTitle
  },
  created() {
    this.cominit();
    if (this.$route.params.id) {
      
      var _this = this;
      var url =
        BASE_URL1+"/kb/v1/rule/salary/config/" + this.$route.params.id;
      util.ajax
        .get(url, {})
        .then(function(res) {
            if (res.data.err == 0) {
              _this.prize.id = res.data.data.id;
              _this.prize.name = res.data.data.name;
              _this.prize.rankIds = res.data.data.rankSet;
              _this.prize.enabled = res.data.data.enabled ? "1" : "0";
              _this.prize.assessmentCycleType = res.data.data.assessmentCycleType ? res.data.data.assessmentCycleType : "";
              _this.prize.configValue.assessmentCycleType = JSON.parse(
                res.data.data.configValue
              ).assessmentCycleType;
              _this.prize.configValue.list = JSON.parse(
                res.data.data.configValue
              ).list;
               _this.prize.configValue.ruleName = JSON.parse(
                res.data.data.configValue
              ).ruleName;
              _this.tableList = _this.prize.configValue.list;
            }
        })
        .catch(res => {
        });
    }
  },
  methods: {
    zhijiadd() {
      this.zhijimodel = true;
    },
    add() {
      this.$refs["formInline"].validate(valid => {
        if (valid) {
          if (
            parseInt(this.formInline.fycOverLimitValue) <=
            parseInt(this.formInline.fycLowLimitValue)
          ) {
            this.formInline.fycOverLimitValue = "";
            this.formInline.fycLowLimitValue = "";
            this.$Message.error("FYC最大值必须大于最小值且不能为空");
            return false;
          }
          if (
            parseInt(this.formInline.renewalRateOverLimitValue) <=
            parseInt(this.formInline.renewalRateLowLimitValue)
          ) {
            this.formInline.renewalRateOverLimitValue = "";
            this.formInline.renewalRateLowLimitValue = "";
            this.$Message.error("R13最大值必须大于最小值且不能为空");
            return false;
          }

          var _this = this;
          _this.tableList = [];
          _this.prize.configValue.list.push(
            JSON.parse(JSON.stringify(_this.formInline))
          );
          _this.tableList = [].concat(
            JSON.parse(JSON.stringify(_this.prize.configValue.list))
          );
          for (var i in _this.tableList) {
            if (
              _this.tableList[i].fycOverLimitValue &&
              _this.tableList[i].fycLowLimitValue
            ) {
              _this.tableList[i].fyc =
                _this.tableList[i].fycLowLimitValue +
                "≤FYC<" +
                _this.tableList[i].fycOverLimitValue;
            }
            if (
              !_this.tableList[i].fycOverLimitValue &&
              _this.tableList[i].fycLowLimitValue
            ) {
              _this.tableList[i].fyc =
                _this.tableList[i].fycLowLimitValue + "≤FYC";
            }
            if (
              _this.tableList[i].fycOverLimitValue &&
              !_this.tableList[i].fycLowLimitValue
            ) {
              _this.tableList[i].fyc =
                "FYC<" + _this.tableList[i].fycOverLimitValue;
            }

            if (
              _this.tableList[i].renewalRateOverLimitValue &&
              _this.tableList[i].renewalRateLowLimitValue
            ) {
              _this.tableList[i].renewalRate =
                _this.tableList[i].renewalRateLowLimitValue +
                "≤R13<" +
                _this.tableList[i].renewalRateOverLimitValue;
            }
            if (
              !_this.tableList[i].renewalRateOverLimitValue &&
              _this.tableList[i].renewalRateLowLimitValue
            ) {
              _this.tableList[i].renewalRate =
                _this.tableList[i].renewalRateLowLimitValue + "≤R13";
            }
            if (
              _this.tableList[i].renewalRateOverLimitValue &&
              !_this.tableList[i].renewalRateLowLimitValue
            ) {
              _this.tableList[i].renewalRate =
                "R13<" + _this.tableList[i].renewalRateOverLimitValue;
            }
          }
          this.$refs["formInline"].resetFields();
          _this.tableList = _this.tableList;
          _this.zhijimodel = false;
        }
      });
    },
    cance() {
      this.$refs["formInline"].resetFields();
      this.zhijimodel = false;
    },
    create() {
      this.$refs["prize"].validate(valid => {
        if (valid) {
          var _this = this;
          let form = Object.assign({}, _this.prize);
          form.configValue = JSON.stringify(form.configValue);
          form.assessmentCycleType = form.configValue.assessmentCycleType;
          form.rankIds = form.rankIds.join();
          if (this.$route.params.id) {
            let url =
              BASE_URL1+"/kb/v1/rule/salary/config/" + form.id;
            util.ajax.post(url, form).then(res => {
              if (res.data.err == 0) {
                _this.$Message.success("操作成功");
                _this.$router.push({ name: "rulelist" });
              } else {
                _this.$Message.error("操作失败");
              }
            });
          } else {
            new Promise((resolve, reject) => {
              get_add_rule(form)
                .then(response => {
                  _this.prize.tempalteId = _this.$route.params.tempalteId;
                  _this.prize.name = "";
                  _this.prize.rankIds = [];
                  _this.prize.configValue = "";
                  _this.prize.enabled = "";
                  _this.prize.list = [];
                  if (response.data.err == 0) {
                    _this.$router.push({
                      name: "rulelist"
                    });
                  } else {
                    _this.$refs["prize"].resetFields();
                    _this.$Message.error(response.data.info);
                  }

                  resolve();
                })
                .catch(error => {
                  reject(error);
                });
            });
          }
        }
      });
    },
    // 点击删除
    remove(index) {
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条记录?",
        onOk: () => {
          this.tableList.splice(index, 1);
          this.prize.configValue.splice(index, 1);
        }
      });
    },
    cominit() {
      new Promise((resolve, reject) => {
        // get_rank().then(response => {
        get_rank()
          .then(response => {
            if (response.data.err == 0) {
              this.comoptions = response.data.data;
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      })
    }
  }
};
</script>